<template>
  <div class="m-calendar">
    <van-calendar
      :poppable="false"
      :min-date="dayStart"
      :max-date="dayEnd"
      :formatter="dayFormatter"
      @select="handleDateSelect"
    >
      <template #subtitle="{ text, date }">
        <div>
          <div class="icon-wrapper" @click="prevMonth">
            <van-icon name="arrow-left" />
          </div>
          <span style="margin: 0px 6px">
            {{ text }}
          </span>
          <div class="icon-wrapper" @click="nextMonth">
            <van-icon name="arrow" />
          </div>
        </div>
      </template>
      <template #top-info="{ __text }">
        <div v-show="dotMap[__text]" class="schedule-dot" />
      </template>
      <template #bottom-info="{ __text }">
        <div>
          <div>{{ lunarDay[__text] }}</div>
        </div>
      </template>
      <template #footer>
        <!-- empty -->
      </template>
    </van-calendar>
  </div>
</template>

<script setup lang="ts">
// 日历组件
import dayjs from 'dayjs'
import { computed, ref, watch } from 'vue'
import { Lunar } from 'lunar-javascript'
const DAY_FORMAT = 'YYYY/MM/DD'

const props = defineProps<{
  list: any[]
}>()

const emit = defineEmits(['select', 'month'])
const now = ref(dayjs())

const dayStart = computed(() => {
  return now.value.date(1).toDate()
})

const dayEnd = computed(() => {
  return now.value.date(now.value.daysInMonth()).toDate()
})

const ellipsis = ref<boolean>(false)

// watch(() => {

// })

const lunarDay = computed(() => {
  const ret = {}
  for (let d = 1; d <= now.value.daysInMonth(); d++) {
    const nd = now.value.date(d).toDate()
    const ld = Lunar.fromDate(nd)
    ret[d] = ld.getDayInChinese()
  }
  return ret
})

const dotMap = computed(() => {
  return props.list.reduce((r, c) => {
    const k = dayjs(c.scheduleDate).format('D')
    r[k] = 1
    return r
  }, {})
})

const dayFormatter = day => {
  const isToday = dayjs().isSame(dayjs(day.date), 'day')
  day.__text = day.text
  day.text = isToday ? '今' : day.text
  return day
  // return isToday ? '今' : day.text
}

const prevMonth = () => {
  now.value = now.value.month(now.value.month() - 1)
  emit('month', now.value.date(now.value.daysInMonth()).toDate())
}

const nextMonth = () => {
  now.value = now.value.month(now.value.month() + 1)
  emit('month', now.value.date(1).toDate())
}

const handleDateSelect = date => {
  console.log('date select', date)
  emit('select', date)
}

handleDateSelect(now.value.toDate())
</script>

<style lang="less">
.m-calendar {
  --van-radius-md: 50%;
  --van-calendar-selected-day-background: #3a75c5;
  --van-calendar-header-shadow: 0 1px 1px #efefef;
  --van-calendar-day-height: 55px;
  --van-calendar-selected-day-size: 43px;
  .van-calendar__header {
    width: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 99;
  }
  .van-calendar__body {
    margin-top: 80px;
  }
  // --van-calendar-day-height
  .van-calendar__header-title,
  .van-calendar__month-mark {
    display: none;
  }
  .van-calendar__header-subtitle {
    font-size: 16px;
  }
  .van-calendar__selected-day {
    box-shadow: 0px 8px 15px 2px #3a75c53f;
  }
  .van-calendar__day,
  .van-calendar__selected-day {
    flex-direction: column;
    font-weight: 600;
    font-size: 16px;
  }
  .van-calendar__bottom-info {
    position: relative;
    font-weight: 200;
    margin-top: 8px;
    font-size: 20px;
    transform: scale(0.5);
  }

  .icon-wrapper {
    display: inline-block;
    padding: 5px;
  }

  .schedule-dot {
    position: absolute;
    top: 3px;
    left: 10px;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
  }
}
</style>
